<template>
  <n-modal
    v-model:show="showModal"
    :show-icon="showIcon"
    :preset="preset"
    :positive-text="positiveText"
    :negative-text="negativeText"
    class="max-w-105 min-w-10 w800"
    :title="title"
    @positive-click="positiveClick"
    @negative-click="negativeClick"
    @close="closeModal"
    @after-leave="closeModal"
  >
    <n-date-picker v-model:value="timestamp" type="date" />
    <generate-code />
  </n-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import GenerateCode from './generate-code/index.vue';
const timestamp = ref(Date.now());

interface Props {
  /** 展示弹窗 */
  show: boolean;
  /** 是否显示icon */
  showIcon?: boolean;
  /** 积极显示的文字 */
  positiveText?: string;
  /** 消极显示的文字 */
  negativeText?: string;
  /** modal显示的标题 */
  title?: string;
  /** 预设类型 */
  preset?: 'dialog' | 'card';
}

const Emit = defineEmits<{
  (e: 'update:value', val: boolean): void;
  (e: 'postive-click', value: number): void;
  (e: 'negative-click'): void;
  (e: 'close-modal', value: boolean): void;
}>();

const props = withDefaults(defineProps<Props>(), {
  preset: 'dialog',
  show: false,
  showIcon: false,
  positiveText: '确 认',
  negativeText: '取 消',
  title: '标题'
});

const showModal = computed({
  get() {
    return props.show;
  },
  set(val: boolean) {
    Emit('update:value', val);
  }
});

const closeModal = () => {
  Emit('close-modal', false);
};

const negativeClick = () => {
  closeModal();
  Emit('negative-click');
};

const positiveClick = () => {
  Emit('postive-click', timestamp.value);
};
</script>
